<!DOCTYPE html>
<html>
<head>
	<title>导航条</title>

	<style type="text/css">
		div.two{
			position: absolute;
			margin: 0px;
			padding: 0px;
			/*float: left;*/
		}

		div.first{
			position: absolute;
			float: left;
			margin-top: 30px;
		}


		div.cursor{
			background-color: #98bf21;
			color: white;
			position: absolute;
			margin-top: 30px;
			margin-left: 120px;
			/*float: left;*/
			padding-left: 10px;
		}

		/*垂直导航条*/
		ul.first{
			list-style-type: none;
			margin: 0px;
			padding: 0px;
		}

		a.first:link, a.first:visited {
			display: block;
			font-weight: bold;
			background-color: #bebebe;
			width: 120px;
			text-align: center;
			padding: 4px;
			text-decoration: none;
			text-transform: uppercase;
		}

		a.first:hover, a.first:active {
			background-color: #cc0000;
		}

		/*横向导航条*/
		ul.two{
			list-style-type: none;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
		}

		li.two{
			float: left;
		}

		a.two:link, a.two:visited{
			display: block;
			width: 120px;
			font-weight: bold;
			color: #ffffff;
			background-color: #bebebe;
			text-align: center;
			padding: 4px;
			text-decoration: none;
			text-transform: uppercase;
		}

		a.two:hover, a.two:active{
			background-color: #cc0000;
		}

		/*
		:first-child 伪类来选择元素的第一个子元素。
		*/
		li.first:first-child{
			/*使元素不可见*/
			visibility: collapse;
		}



	</style>

</head>
<body>

<div class="first">
	<ul class="first">
		<li class="first">
			<a href="#home" class="first">Home</a>
		</li>
		<li class="first">
			<a href="#news" class="first">News</a>
		</li>
		<li class="first">
			<a href="#contact" class="first">Contact</a>
		</li>
		<li class="first">
			<a href="#about" class="first">About</a>
		</li>
	</ul>
</div>

<div class="two">
	<ul class="two">
		<li class="two">
			<a href="#home" class="two">Home</a>
		</li>
		<li class="two">
			<a href="#news" class="two">News</a>
		</li>
		<li class="two">
			<a href="#contact" class="two">Contact</a>
		</li>
		<li class="two">
			<a href="#about" class="two">About</a>
		</li>
	</ul>
</div>

<div class="cursor">
	<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
	<span style="cursor: auto;">Auto</span>
	<br/>
	<span style="cursor: crosshair;">Crosshair</span>
	<br />
	<span style="cursor: default;">Default</span>
	<br />
	<span style="cursor: move;">Move</span>
	<br />
	<span style="cursor: e-resize;">e-resize</span>
	<br />
	<span style="cursor: ne-resize;">ne-resize</span>
	<br />
	<span style="cursor: nw-resize;">nw-resize</span>
	<br />
	<span style="cursor: n-resize;">n-resize</span>
	<br />
	<span style="cursor: se-resize;">se-resize</span>
	<br />
	<span style="cursor: sw-resize;">sw-resize</span>
	<br />
	<span style="cursor: s-resize;">s-resize</span>
	<br />
	<span style="cursor: w-resize;">w-resize</span>
	<br />
	<span style="cursor: text;">text</span>
	<br />
	<span style="cursor: wait;">wait</span>
	<br />
	<span style="cursor: help;">help</span>
	<br />
</div>	

</body>
</html>